<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        * 
        {
          margin: 0px;
        }
      
        .div1 {
          position: absolute;
          width: 200px;
          height: 200px;
          top: 50px;
          left: 10px;
          background: red;
        }
    </style>
    <script type="text/javascript" src="../../jQuery-JS/jquery-3.6.0.js"></script>
    <script type="text/javascript">
        /*
        需求
        1.点击btn1，慢慢淡出
          无参
          有参
            字符串参数
            数字参数
        2.点击btn2，慢慢淡入
        3.点击btn3，淡出/淡入切换，动画结束时提示“动画结束了”
        */
        
        $(function(){
            //1.点击btn1，慢慢淡出
            var $div_div1=$("div.div1");
            var $button_btn1=$(":button#btn1");
            $button_btn1.click(function(){
                $div_div1.fadeOut(1000);
                //console.log($div_div1.fadeOut)
            })

            //2.点击btn2，慢慢淡入
            var $button_btn2=$(":button#btn2");
            $button_btn2.click(function(){
                $div_div1.fadeIn(1000);
            })

            //3.点击btn3，淡出/淡入切换，动画结束时提示“动画结束了”
            var $button_btn3=$(":button#btn3");
            $button_btn3.click(function(){
                $div_div1.fadeToggle(function(){
                    console.log("动画结束");
                })
            })
        })
    </script>
</head>
<body>
    <button id="btn1">慢慢淡出</button>
    <button id="btn2">慢慢淡入</button>
    <button id="btn3">淡出/淡入切换</button>

    <div class="div1"></div>

    <!--
        淡入淡出：不断改变元素的透明度来实现的
        1.fadeIn():带动画的显示
        2.fadeOut():带动画隐藏
        3.fadeToggle():带动画切换显示/隐藏
    -->
</body>
</html>